<template>
  <div>
    <!-- breadcrumb-area start -->
    <div class="breadcrumb-area">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="row breadcrumb_box align-items-center">
              <div class="col-lg-6 col-md-6 col-sm-12 text-center text-md-left">
                <h2 class="breadcrumb-title">我的订单</h2>
              </div>
              <div class="col-lg-6 col-md-6 col-sm-12">
                <!-- breadcrumb-list start -->
                <ul class="breadcrumb-list text-center text-md-right">
                  <li class="breadcrumb-item"><router-link to="/">首页</router-link></li>
                  <li class="breadcrumb-item active">我的订单</li>
                </ul>
                <!-- breadcrumb-list end -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- breadcrumb-area end -->

    <!-- Cart Area Start -->
    <div class="cart-main-area pt-100px pb-100px">
      <div class="container">
        <h3 class="cart-page-title">你的订单</h3>
        <div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12 col-12">
            <el-card v-for="(o, index1) in historyOrder" :key="index1">
              <el-row style="margin-bottom: 20px">
                <el-col :offset="1" :span="10"
                  >订单编号：{{ o.orderMasterNumber }}</el-col
                >
                <el-col :span="8"
                  >实付款（含运费：￥0.00）:<span style="color: orange"
                    >￥{{ o.orderMasterMoney }}</span
                  ></el-col>
                  <el-col  :span="4"
                  >
                  <el-popconfirm
                    title="确认收货吗？"
                    @confirm="confirmReceipt(o.id)"
                  >
                   <el-button type="primary" v-show="!o.orderMasterReceiveTime" plain slot="reference">确认收货</el-button>
                  </el-popconfirm>
                  <el-tag type="success" v-show="o.orderMasterReceiveTime">交易成功</el-tag>
                  </el-col
                >
              </el-row>
              <el-card>
                <el-table :data="o.orderDetails" stripe style="width: 100%">
                  <el-table-column prop="bookImg" label="图片">
                    <template slot-scope="scope">
                      <el-image
                        style="width: 100px; height: 100px"
                        :src="$store.state.imgURLPre+scope.row.bookImg"
                        :preview-src-list="[$store.state.imgURLPre+scope.row.bookImg]"
                      >
                      </el-image>
                    </template>
                  </el-table-column>
                  <el-table-column prop="bookTitle" label="商品名称">
                  </el-table-column>
                  <el-table-column prop="bookNewPrice" label="价格（元）">
                  </el-table-column>
                  <el-table-column prop="orderDetailAmount" label="数量">
                  </el-table-column>
                  <el-table-column label="小计">
                    <template slot-scope="scope">
                      {{
                        (
                          scope.row.bookNewPrice * scope.row.orderDetailAmount
                        ).toFixed(2)
                      }}
                    </template>
                  </el-table-column>
                </el-table>
              </el-card>
            </el-card>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[5, 10]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- Cart Area End -->
  </div>
</template>

<script>
import API from "@/api/request";
const url = "/api/msslyyOrderMaster";
export default {
  name: "BookShopOrder",

  components: {},

  directives: {},

  data() {
    return {
      historyOrder: [],
      user: {},
      pageNum: 1,
      pageSize: 5,
      total: 0,
    };
  },

  mounted() {},
  created() {
    this.user = sessionStorage.getItem("user1")
      ? JSON.parse(sessionStorage.getItem("user1"))
      : {};
    this.getHistoryOrder();
  },

  methods: {
    confirmReceipt(id){
       API.get(url + `/confirmReceipt/${id}`).then((res) => {
          this.$message({
          message: '收货成功！！',
          type: 'success'
        });
        this.getHistoryOrder();
      });
    },
    getHistoryOrder() {
      API.get(url + `/getHistoryOrder/${this.user.id}`, {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        },
      }).then((res) => {
        this.historyOrder = res.data.records || [];
        this.total = res.data.total;
      });
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getHistoryOrder();
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.getHistoryOrder();
    },
  },
};
</script>

<style  scoped>
</style>